<!--
 * @页面名称:url管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card urlManage">
    <splitpanes :dbl-click-splitter="false" style="height: 100%">
      <pane size="15">
        <ztree :setting="treeSetting.setting" :nodes="treeSetting.treeData" @onClick="onClick"> </ztree>
      </pane>
      <pane size="85">
        <el-space style="margin-bottom: 5px">
          <el-button type="danger" :disabled="disabled" @click="del">批量删除</el-button>
          <el-button @click="editAction">修改</el-button>
          <el-dropdown>
            <el-button type="primary">
              <el-button type="primary">报表导出</el-button>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="exportAll">导出表单目录(全部)</el-dropdown-item>
                <el-dropdown-item @click="exportOne">导出表单目录(单条)</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-input style="max-width: 600px" v-model="searchVal" placeholder="请输入搜索条件">
            <template #append>
              <el-button @click="search">搜索</el-button>
            </template>
          </el-input>
        </el-space>
        <splitpanes :dbl-click-splitter="false" horizontal style="height: calc(100% - 42px)">
          <pane>
            <stable
              style="height: 100%"
              :columns="tableSetting.columns"
              :data="tableSetting.data"
              :tablePage="tableSetting.tablePage"
              :pageSizes="[15, 100, 1000, { label: '全量数据', value: -1 }]"
              @rowClick="rowClick"
              @pageChange="pageChange"
              @selectionChange="selectChange"
            >
            </stable>
          </pane>
          <pane>
            <stable style="height: 100%" :columns="tableSetting2.columns" :data="tableSetting2.data"> </stable>
          </pane>
        </splitpanes>
      </pane>
    </splitpanes>
    <!-- url借阅弹框 -->
    <modal v-model:visible="urlModal.isShow" :title="urlModal.title" width="1000" @ok="ok">
      <el-form :model="urlFormModal" label-width="100px">
        <el-form-item label="外链地址:">
          <el-input v-model="urlFormModal.url" disabled />
        </el-form-item>
        <el-row>
          <el-col :span="6">
            <el-form-item label="是否打印:">
              <el-checkbox v-model="urlFormModal.isPrint"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否下载:">
              <el-checkbox v-model="urlFormModal.isDownload"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="连接启用:">
              <el-checkbox v-model="urlFormModal.enable"></el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="验证码启用:">
              <el-checkbox v-model="urlFormModal.code_enable"></el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="验证码:">
              <el-input v-model="urlFormModal.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="水印文字:">
              <el-input v-model="urlFormModal.watermark"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="指定借阅人:">
              <el-input v-model="urlFormModal.borrower" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="借阅日期:">
              <el-date-picker v-model="urlFormModal.borrowDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间:">
              <el-date-picker v-model="urlFormModal.expireDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="备注:">
              <el-input v-model="urlFormModal.remark" :rows="2" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </modal>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, watch, onMounted } from "vue";
import { CopyDocument } from "@element-plus/icons-vue";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import { getSysConfig } from "@/utils/util";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { timeFormat, fileSizeFormat } from "@/utils/formatter";
import Ztree from "@/components/Ztree/Ztree.vue";
import useClipboard from "vue-clipboard3";

const { proxy } = useCurrentInstance();
const { toClipboard } = useClipboard();
// 删除按钮是否禁用
const disabled = ref(true);
// tree配置
const treeSetting = reactive({
  setting: {
    // ztree配置
    data: {
      simpleData: {
        enable: false
      },
      key: {
        name: "Value",
        children: "List"
      }
    }
  },
  treeData: [] as any[],
  treeObj: {} as any
});
// 主表表格配置
const tableSetting = reactive({
  // 表格数据
  data: [] as any[],
  // 表格源数据
  sourceData: [] as any[],
  // 表格列配置
  columns: [
    { type: "checkbox", width: 55 },
    {
      title: "外链地址",
      field: "BU_PreviewUrl",
      width: 300,
      slots: {
        default: ({ row }: any) => {
          return [
            <div>
              <el-icon style="font-size: 13px" onClick={() => copyUrl(row.BU_PreviewUrl)}>
                <CopyDocument />
              </el-icon>
              <span style="margin-left: 10px" v-html={showData(systemUrl + row.BU_PreviewUrl)}></span>
            </div>
          ];
        }
      }
    },
    { title: "借阅部门", field: "BU_DeptName", width: 120, sortable: true },
    { title: "借阅人", field: "BU_BorrowUser", width: 120, sortable: true },
    { title: "提取码", field: "BU_Verification_Code", width: 120, sortable: true },
    { title: "创建时间", field: "BU_BorrowDate", width: 150, sortable: true, formatter: timeFormat },
    { title: "到期时间", field: "BU_ExpireDate", width: 150, sortable: true, formatter: timeFormat },
    {
      title: "连接是否启用",
      field: "BU_IsEnable",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.BU_IsEnable} />];
        }
      }
    },
    {
      title: "是否打印",
      field: "BU_IsPrint",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.BU_IsPrint} />];
        }
      }
    },
    {
      title: "是否下载",
      field: "BU_IsDownload",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.BU_IsDownload} />];
        }
      }
    },
    {
      title: "验证码是否启用",
      field: "BU_Enable_Verification_Code",
      width: 120,
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<el-checkbox disabled v-model={row.BU_Enable_Verification_Code} />];
        }
      }
    },
    { title: "水印文字", field: "BU_WaterMark", width: 120, sortable: true },
    { title: "备注", field: "BU_Remark", width: 80, sortable: true },
    {
      title: "操作",
      width: 80,
      fixed: "right",
      slots: {
        default: ({ row }: any) => {
          return [
            <el-space>
              {row.BU_Enable_Verification_Code ? (
                <el-link underline={false} type="primary" onClick={() => close(row)}>
                  停用
                </el-link>
              ) : (
                <el-link underline={false} type="primary" onClick={() => open(row)}>
                  启用
                </el-link>
              )}
            </el-space>
          ];
        }
      }
    }
  ],
  tablePage: {
    showPage: true,
    pageIndex: 1,
    pageSize: 15,
    total: 0
  },
  rowClickObj: {} as any,
  selection: [] as any[]
});
// 全文表格配置
const tableSetting2 = reactive({
  // 表格数据
  data: [] as any[],
  // 表格列配置
  columns: [
    {
      title: "顺序号",
      field: "AI_Index",
      sortable: true
    },
    {
      title: "文件名",
      field: "AI_Name",
      sortable: true
    },
    {
      title: "文件大小",
      field: "AI_Source_Size",
      sortable: true,
      formatter: fileSizeFormat
    },
    {
      title: "上传时间",
      field: "AI_UploadDateTime",
      sortable: true
    },
    {
      title: "创建时间",
      field: "AI_FileDateTime",
      sortable: true
    }
  ]
});
// url弹框配置
const urlModal = reactive({
  isShow: false,
  title: "电子文件借阅"
});
// 从系统参数中取出的url
const systemUrl = getSysConfig("PreviewUrl");
// 表单绑定字段
const urlFormModal = ref({
  url: "",
  isPrint: false,
  isDownload: false,
  enable: false,
  code: "",
  watermark: "",
  borrower: "",
  borrowDate: "",
  expireDate: "" as any,
  remark: "",
  code_enable: false,
  deptName: ""
});
// 搜索框绑定字段
const searchVal = ref("");
// 搜索事件
const search = () => {
  tableSetting.data = tableSetting.sourceData.filter((v: any) => {
    return v.BU_PreviewUrl.includes(searchVal.value);
  });
  console.log(tableSetting.data);
};
// 获取左侧树数据
const getLeftTreeData = () => {
  proxy.$vueAxios.get("MasterBaseBorrowUrl/GetDateTree").then((res: any) => {
    treeSetting.treeData = res.List;
  });
};
// 左侧树点击事件
const onClick = (tree: any) => {
  treeSetting.treeObj = tree;
  // 获取右侧表格数据
  getTableData(tree);
};
// 获取主表数据
const getTableData = (tree: any) => {
  proxy.$vueAxios
    .get(
      "MasterBaseBorrowUrl/GetListByDate",
      { date: tree.Key, pageIndex: tableSetting.tablePage.pageIndex, pageSize: tableSetting.tablePage.pageSize },
      { noLoading: true }
    )
    .then((res: any) => {
      tableSetting.data = res.List;
      tableSetting.sourceData = res.List;
      tableSetting.tablePage.total = res.Count;
    });
};
// 主表格单击
const rowClick = ({ row }: any) => {
  tableSetting.rowClickObj = row;
  // 获取副表数据
  proxy.$vueAxios.get("MasterBaseBorrowUrl/GetPreviewInfo", { previewKey: row.BU_ID }).then((res: any) => {
    tableSetting2.data = res.Model.PreviewFiles;
  });
};
// 主表多选
const selectChange = (val: any) => {
  tableSetting.selection = val;
  if (val.length > 0) {
    disabled.value = false;
  } else {
    disabled.value = true;
  }
};
// 切换分页
const pageChange = ({ pageIndex, pageSize }: any) => {
  tableSetting.tablePage.pageIndex = pageIndex;
  tableSetting.tablePage.pageSize = pageSize;
  getTableData(treeSetting.treeObj);
};
// 复制url
const copyUrl = async (url: string) => {
  try {
    //复制
    await toClipboard(systemUrl + url);
    proxy.$message.success("复制成功");
  } catch (e) {
    //复制失败
    console.error(e);
    proxy.$message.success("复制失败");
  }
};
// 修改
const editAction = () => {
  urlModal.isShow = true;
  urlFormModal.value.url = systemUrl + tableSetting.rowClickObj.BU_PreviewUrl;
  urlFormModal.value.url2 = tableSetting.rowClickObj.BU_PreviewUrl;
  urlFormModal.value.isPrint = tableSetting.rowClickObj.BU_IsPrint;
  urlFormModal.value.isDownload = tableSetting.rowClickObj.BU_IsDownload;
  urlFormModal.value.enable = tableSetting.rowClickObj.BU_IsEnable;
  urlFormModal.value.code_enable = tableSetting.rowClickObj.BU_Enable_Verification_Code;
  urlFormModal.value.code = tableSetting.rowClickObj.BU_Verification_Code;
  urlFormModal.value.watermark = tableSetting.rowClickObj.BU_WaterMark;
  urlFormModal.value.borrower = tableSetting.rowClickObj.BU_BorrowUser;
  urlFormModal.value.borrowDate = tableSetting.rowClickObj.BU_BorrowDate;
  urlFormModal.value.expireDate = tableSetting.rowClickObj.BU_ExpireDate;
  urlFormModal.value.remark = tableSetting.rowClickObj.BU_Remark;
  urlFormModal.value.deptName = tableSetting.rowClickObj.BU_DeptName;
};
// url弹框确认
const ok = () => {
  const params = {
    bU_ID: tableSetting.rowClickObj.BU_ID,
    secondID: tableSetting.rowClickObj.SecondID,
    fonds_ID: tableSetting.rowClickObj.Fonds_ID,
    bU_BorrowDate: urlFormModal.value.borrowDate,
    bU_ExpireDate: urlFormModal.value.expireDate,
    bU_IsPrint: urlFormModal.value.isPrint,
    bU_IsDownload: urlFormModal.value.isDownload,
    bU_WaterMark: urlFormModal.value.watermark,
    bU_DeptName: urlFormModal.value.deptName,
    bU_BorrowUser: urlFormModal.value.borrower,
    bU_PreviewUrl: urlFormModal.value.url2,
    bU_Verification_Code: urlFormModal.value.code,
    bU_Enable_Verification_Code: urlFormModal.value.code_enable,
    bU_IsEnable: urlFormModal.value.enable,
    bU_Remark: urlFormModal.value.remark,
    fileInfos: [tableSetting2.data[0].AI_ID]
  };
  proxy.$vueAxios.post("MasterBaseBorrowUrl/Update", params).then((res: any) => {
    if (res.Mark) {
      getTableData(treeSetting.treeObj);
      proxy.$message({
        message: "修改成功",
        type: "success"
      });
    }
    urlModal.isShow = false;
  });
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios
        .post(
          "MasterBaseBorrowUrl/Delete",
          tableSetting.selection.map((v: any) => v.BU_ID)
        )
        .then((res: any) => {
          if (res.Mark) {
            getTableData(treeSetting.treeObj);
            proxy.$message.success("删除成功");
          } else {
            proxy.$message.error("删除失败");
          }
        });
    });
};
// 停用
const close = (row: any) => {
  proxy.$vueAxios.post("MasterBaseBorrowUrl/EnableAndDisable", { bU_ID: row.BU_ID, bU_Enable: false }).then((res: any) => {
    if (res.Mark) {
      tableSetting.data.filter((v: any) => v.BU_ID === row.BU_ID)[0].BU_Enable_Verification_Code = false;
      proxy.$message({
        message: "停用成功",
        type: "success"
      });
    }
  });
};
// 启用
const open = (row: any) => {
  proxy.$vueAxios.post("MasterBaseBorrowUrl/EnableAndDisable", { bU_ID: row.BU_ID, bU_Enable: true }).then((res: any) => {
    if (res.Mark) {
      tableSetting.data.filter((v: any) => v.BU_ID === row.BU_ID)[0].BU_Enable_Verification_Code = true;
      proxy.$message({
        message: "启用成功",
        type: "success"
      });
    }
  });
};
// 导出全部
const exportAll = async () => {
  const header = tableSetting.columns.filter(v => v.title).map(v => v.title);
  const filterVal = tableSetting.columns.filter(v => v.title).map(v => v.field);
  const data = tableSetting.data.map((v: any) => filterVal.map((j: any) => v[j]));
  import("@/vendor/Export2Excel").then(excel => {
    excel.export_json_to_excel({
      header: header, //表头 必填
      data, //具体数据 必填
      filename: "表单目录(全部)", //非必填
      autoWidth: true, //非必填
      bookType: "xlsx" //非必填
    });
  });
};
// 导出单条
const exportOne = async () => {
  if (tableSetting.selection.length > 0) {
    const header = tableSetting.columns.filter(v => v.title).map(v => v.title);
    const filterVal = tableSetting.columns.filter(v => v.title).map(v => v.field);
    const data = tableSetting.selection.map((v: any) => filterVal.map((j: any) => v[j]));
    import("@/vendor/Export2Excel").then(excel => {
      excel.export_json_to_excel({
        header: header, //表头 必填
        data, //具体数据 必填
        filename: "表单目录(单条)", //非必填
        autoWidth: true, //非必填
        bookType: "xlsx" //非必填
      });
    });
  } else {
    proxy.$message({
      message: "请选择要导出的记录",
      type: "warning"
    });
  }
};
// 搜索数据显示高亮
const showData = (val: string) => {
  if (val.indexOf(searchVal.value) !== -1 && searchVal.value !== "" && val) {
    return val.replace(searchVal.value, '<font color="red">' + searchVal.value + "</font>");
  } else {
    return val;
  }
};
onMounted(() => {
  getLeftTreeData();
});
</script>

<style scoped lang="scss">
.urlManage {
  height: 100%;
}
</style>
